<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>注册</span>
            </div>
        </template>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input
                    v-model="ruleForm.pwd"
                    type="password"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm">
                <el-input
                    v-model="ruleForm.confirm"
                    type="password"
                    autocomplete="off"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)"
                    >Submit</el-button
                >
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import {reg} from '../services/user';
const ruleFormRef = ref<FormInstance>();

const validatePwd = (rule: any, value: any, callback: any) => {
    if (value === "") {
        callback(new Error("请输入密码"));
    } else {
        if (ruleForm.confirm !== "") {
            if (!ruleFormRef.value) return;
            ruleFormRef.value.validateField("confirm", () => null);
        }
        callback();
    }
};
const validateConfirm = (rule: any, value: any, callback: any) => {
    if (value === "") {
        callback(new Error("请输入确认密码"));
    } else if (value !== ruleForm.pwd) {
        callback(new Error("两次密码不一致!"));
    } else {
        callback();
    }
};

const ruleForm = reactive({
    username: "",
    pwd: "",
    confirm: "",
});

const rules = reactive({
    username: [
        { required: true, message: "用户名不能为空" },
        {
            pattern: /^\w{6,20}$/,
            message: "用户名格式不正确",
        },
    ],
    pwd: [{ validator: validatePwd, trigger: "blur" }],
    confirm: [{ validator: validateConfirm, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            console.log("submit!");
            let res = await reg({username:ruleForm.username,pwd:ruleForm.pwd});
            console.log("res",res);
        } else {
            console.log("error submit!");
            return false;
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style>
.box-card {
    width: 800px;
    margin: auto;
}
</style>